<template>
    <div class="cmt-container">
        <h3>发表评论</h3>
        <hr>
        <textarea placeholder="请输入评论内容" maxlength="120" v-model="msg"></textarea>

        <mt-button type="primary" size="large" @click="postComment">发表评论</mt-button>
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in comments" :key="item.commentId">
                <div class="cmt-title mui-table-view-cell mui-media">
                    <img class="cmt-headpic mui-media-object mui-pull-left" :src="item.headPic" alt="" />
                    <div class="mui-media-body">
                        <p class="mui-ellipsis">
                            <span>{{item.userName}}</span>
                            <span>第{{i+1}}楼</span>
                        </p>

                    </div>

                </div>
                <div class="cmt-body">
                    {{item.comment}}
                    <div class="cmt-bottom">
                        发表时间：{{item.createTime | dateFormat}}&nbsp;&nbsp;&nbsp;&nbsp;喜欢：{{item.commentLike}}
                        <mt-button class="like" @click="toLike(item.commentId)">
                            <img :src="like_pic" height="10" width="10" slot="icon">
                        </mt-button>
                    </div>

                </div>
                <hr>
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
    import {
        Toast
    } from 'mint-ui'
    export default {
        data() {
            return {
                pageIndex: 1, // 默认展示第一页数据
                comments: [], // 所有的评论数据
                toastInstanse: '',
                msg: '', //评论输入的内容
                // is_like: require('../../images/is_like.png'),
                // no_like: require('../../images/no_like.png'),
                like_pic: require('../../images/no_like.png'),
                like_msg: '',
                userId: this.$store.state.userId,
            }
        },
        created() {
            this.getComments();
        },
        methods: {
            getComments() {
                this.$http.get("front/news/" + this.newsId + "/comments?pageSize=" + 1).
                then(result => {
                    if (result.body.code === 1) {
                        // this.comments = result.body.data;
                        // 每当获取新评论数据的时候，不要把老数据清空，而是应该
                        // 以老数据拼接上新数据
                        this.comments = this.comments.concat(result.body.data);
                    }else{
                        Toast('与服务器断开连接')
                    }
                })
            },
            getMoreComments() {
                this.$http.get("front/news/" + this.newsId + "/comments?pageSize=" + this.pageIndex).
                then(result => {
                    if (result.body.code === 1) {
                        // this.comments = result.body.data;
                        // 每当获取新评论数据的时候，不要把老数据清空，而是应该
                        // 以老数据拼接上新数据
                        this.comments = this.comments.concat(result.body.data);
                        if (result.body.data.length === 0) {
                            // Toast('没有更多评论数据')
                            this.show();
                            setTimeout(() => {
                                this.toastInstanse.close()
                            }, 1000)
                        }
                    }else{
                        Toast('与服务器断开连接')
                    }
                })
            },
            getMore() { //获取更多数据
                this.pageIndex++;
                this.getMoreComments();
            },
            show() {
                this.toastInstanse = Toast({
                    message: '没有更多评论数据',
                    duration: -1,
                    position: 'middle',
                    iconClass: 'glyphicon glyphicon-remove',
                    className: 'myToast' // 自定义Toast的样式，需要自己提供一个类名
                })
            },
            postComment() {
                // 校验是否为空内容
                if (this.msg.trim().length === 0) {
                    return Toast('请输入评论内容')
                }
                // 发表评论
                // 参数1 请求的url地址
                // 参数2 提交给服务器的数据对象(conten： this.msg)
                // 参数3 定义提交时候表单中数据的格式(emulateJSON:true)
                this.$http.post("front/news/" + this.newsId + "/comment", {
                    "content": this.msg.trim(),
                    "userId": this.userId
                }, {
                    emulateJSON: true
                }).
                then(function (result) {
                    if (result.body.code === 1) {
                        // 1.拼接出一个评论对象
                        var cmt = {
                            userName: "我",
                            addTime: Date.now(),
                            comment: this.msg.trim(),
                            commentLike: "0",
                            headPic: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1751223181,3774980950&fm=26&gp=0.jpg"
                        };
                        this.comments.unshift(cmt);
                        this.msg = "";
                        Toast('评论成功');
                    }else{
                        Toast('与服务器断开连接')
                    }
                });
            },
            toLike(commentId) {
                // if(this.like === false){
                //     this.like_pic=this.is_like;
                //     this.like=true;
                // }else{
                //     this.like_pic=this.no_like;
                //     this.like=false;
                // }
                this.$http.post("front/news/"+this.newsId+"/comments/"+commentId+"/like",{
                        userId: this.userId
                },{emulateJSON: true}).then(function(result){
                    if(result.body.code===1){
                        Toast('点赞成功');
                    }else if(result.body.code===20010){
                        console.log(result.body);
                        this.like_msg = result.body.message;
                        Toast(this.like_msg);
                    }
                })
            }
        },
        props: ["newsId"]
    }
</script>

<style lang="scss" scoped>
    .cmt-container {
        h3 {
            font-size: 18px;
        }

        textarea {
            font-size: 14px;
            margin: 0;
            height: 85px;
        }

        .cmt-list {
            margin: 5px 0;

            .cmt-item {
                font-size: 13px;

                .cmt-title {

                    // line-height: 30px;
                    // background-color: #ccc;
                    .cmt-headpic {
                        height: 30px;
                        width: 30px;

                    }

                    .mui-ellipsis {
                        color: #226aff;
                        display: flex;
                        justify-content: space-between;
                        padding-left: 5px;
                    }
                }

                .cmt-body {
                    line-height: 35px;
                    text-indent: 2em;

                    .cmt-bottom {
                        line-height: 30px;
                        text-align: right;
                        padding-right: 5px;
                        .like{
                            background-color: #ffffff
                        }
                    }
                }

            }
        }

    }
</style>